<template>
  <div class="main-box scroll">
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="监控阈值列表"
        highlight-current-row
        :columns="columns"
        :request-api="getThresholdList"
        :pagination="true"
        :show-summary="false"
        :init-param="initParam"
        :indent="20"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="">
          <el-button :icon="Plus" type="primary" @click="openDialog('addOrEditThresholdRef')">新建</el-button>
        </template>
        <!--Expand 表格操作-->
        <template #conditions="scope">
          <span class="conditions" v-for="(item, index) in scope.row.conditions" :key="index">
            {{ item.target + item.lookup + item.value + "%,24h发生次数>=" + item.times }}<br />
          </span>
        </template>
        <!-- <v-if="thisPermission.update" -->
        <template #operation="scope">
          <el-button type="primary" link @click="openDialog('addOrEditThresholdRef', scope.row)">编辑</el-button>
          <el-button type="primary" link @click="deleteAccount([scope.row])">删除</el-button>
        </template>
      </ProTable>
      <modalAddOrEdit ref="addOrEditThresholdRef" @refresh="refresh" />
    </div>
  </div>
</template>

<script setup lang="ts" name="noticeManagement">
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Threshold } from "@/api/interface/monitorThreshold";
import { getThresholdList, ThresholdTerminate } from "@/api/modules/monitorManagement/monitorThreshold";
import { reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import modalAddOrEdit from "./component/modal_add_or_edit.vue";
// import { useRoute } from "vue-router";
// import { useAuthStore } from "@/stores/modules/auth";
// const route = useRoute();
// const authStore = useAuthStore();
// const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});
// import { ElMessage } from "element-plus";
// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive<ColumnProps<Threshold.ThresholdList>[]>([
  { prop: "monitored", label: "监控对象", search: { el: "input", label: "监控对象" }, width: 250 },
  { prop: "conditions", label: "条件", width: 250 },
  { prop: "alarm_name", label: "告警名称", search: { el: "input", label: "告警名称" }, width: 180 },
  { prop: "alarm_type", label: "告警类型", search: { el: "input", label: "告警类型" }, width: 250 },
  { prop: "update_at", label: "操作人" },
  { prop: "updated_at", label: "最近修改时间" },
  { prop: "operation", label: "操作", fixed: "right", width: 250 }
]);
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
// 新建编辑公告
const addOrEditThresholdRef = ref<InstanceType<typeof modalAddOrEdit> | null>(null);
const openDialog = (ref: string, data?: Threshold.ThresholdList) => {
  if (ref == "addOrEditThresholdRef") addOrEditThresholdRef.value?.openDialog(data);
};
// 删除阈值
const deleteAccount = async (params: any[]) => {
  const toDoList: string[] = [];
  const notToDoList: string[] = [];
  const ids: number[] = params.map(item => {
    if (item.id) {
      toDoList.push(item.name);
    } else {
      notToDoList.push(item.name);
    }
    return item.id;
  });
  await useHandleData(ThresholdTerminate, { ids: ids }, ["删除", "公告"], toDoList, notToDoList);
  proTable.value?.getTableList();
};
const refresh = () => {
  proTable.value?.getTableList();
};
</script>

<style lang="scss" scoped>
.main-box {
  flex-direction: row;
  height: 100%;
  &-left {
    display: flex;
    width: 250px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 #e6e6e6;
  }
  &-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
  }
}
.linkCls {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  vertical-align: middle;
  cursor: pointer;
}
</style>
